<template>
  <div id="assetManage">
    <SearchForm v-model="ruleForm" :dataJ="dataJ" @search-form="searchForm" />
    <BkBtn :btnConfig="btnConfig" />
    <div class="card-box" :class="{ noData: !tableData.length }">
      <el-row :gutter="20">
        <el-checkbox-group v-model="checkList">
          <el-col :span="6" v-for="(item, ind) in tableData" :key="ind">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <el-checkbox :label="item.carNumber">&nbsp;</el-checkbox>
                <span class="carPlate">{{ item.carNumber }}</span>
                <el-tag effect="dark" type="danger" v-if="item.locked == 1">{{
                  item.lockedName
                }}</el-tag
                >&nbsp;
                <el-tag effect="dark">{{ item.carStatusName }}</el-tag>
              </div>
              <div class="item">
                <img
                  class="img"
                  :src="`${item.files.doMain}${item.files.fileUrl}`"
                  alt=""
                />
                <div class="info">
                  <div>品牌：{{ item.carBrand }}</div>
                  <div>型号：{{ item.carModel }}</div>
                  <div>年限：{{ item.carYear }}</div>
                  <div>里程：{{ item.carMileage }}</div>
                  <div>价格：{{ item.carPrice }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </div>
    <div class="page-box">
      <BkPage :total="total" :page="page"/>
    </div>
  </div>
</template>

<script>
import { getPackCar, completePackCar } from "@/api/car";

export default {
  name: "",
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      dialogTitle: "",
      tableData: [],
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      checkList: [],
    };
  },
  computed: {
    dataJ() {
      return [
        {
          label: "车牌号",
          prop: "carNumber",
          type: "input",
        },
      ];
    },
    btnConfig() {
      return [
        {
          label: "整备完成",
          Fn: this.packCar,
          icon: "el-icon-time",
        },
      ];
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    searchForm() {
      this.page.pageNum = 1;
      this.getList();
    },
    async getList() {
      let data = {
        ...this.page,
        ...this.ruleForm,
      };
      let res = await getPackCar(data);
      this.checkList = [];
      this.tableData = res.records;
      this.total = res.total;
    },
    async packCar() {
      if (!this.checkList.length) {
        this.$message({
          type: "warning",
          message: "未选择车辆",
        });
        return;
      }
      let data = {
        carList: this.checkList,
      };
      await completePackCar(data);
      this.$message({
        type: "success",
        message: "操作成功",
      });
      this.getList();
    },
  },
};
</script>

<style scoped lang="less">
#assetManage {
  padding: 0 20px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .card-box {
    flex: auto;
    overflow: auto;
    height: 0;
    overflow-x: hidden;
    padding-right: 12px;
    .el-col {
      margin-bottom: 20px;
      .item {
        .img {
          width: 200px;
          height: 200px;
        }
      }
      .carPlate {
        margin-right: 10px;
      }
    }
  }
  .page-box {
    padding: 10px;
    text-align: right;
  }
  .demo-ruleForm {
    .el-col {
      padding-right: 10px;
      &:last-child {
        padding: 0;
      }
      .dian {
        text-align: center;
        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #000;
          border-radius: 20px;
        }
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .card-box {
    .item {
      display: flex;
      .info {
        flex: 1;
        margin-left: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>
